<template>
  <div style="width:100%;height: 10vh;">
    <div style="color:#33ffff;margin: 1vh 0 0.5vh 0">
      {{name}}
    </div>
    <div class="border-boxs">
           <span v-for="(item,index) in cs" :key="index">
               <number-h :c="item.c"></number-h>
           </span>

    </div>
    <el-row :gutter="6" style="margin-top: 0.5vh">
      <el-col :span="18" style="margin-top: 0.8vh">
        <el-progress :percentage="num" :text-inside="true"></el-progress>
      </el-col>
      <el-col :span="6" style="font-size: 0.1rem;">
        <div style="color:#ffffff;">完成率</div>
        <div style="color:#33ffff;">
          {{num}}%
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import numberH from '../number/numberH'
  import numberL from '../number/numberL'

  export default {
    name: "countZ",
    components: {numberH, numberL},
    props: ['cs', 'name', 'num']
  }
</script>

<style scoped>
  .border-boxs {
    position: relative;
    margin: 0 auto;
    height: 7vh;
    background: rgba(0, 119, 153, 0.1);
    line-height: 8vh;
  }

  .border-boxs:before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 100%;
    height: 100%;
    background: linear-gradient(to left, #33ffff, #33ffff) left top no-repeat,
    linear-gradient(to bottom, #33ffff, #33ffff) left top no-repeat,
    linear-gradient(to left, #33ffff, #33ffff) right bottom no-repeat,
    linear-gradient(to left, #33ffff, #33ffff) right bottom no-repeat;
    background-size: 2px 8px, 8px 2px, 2px 8px, 8px 2px;
  }

  /deep/ .el-progress-bar__outer {
    background-color: transparent;
    border: 1px #0066ff solid;
  }

  /deep/ .el-progress-bar__inner {
    background-image: linear-gradient(to left, #33ffff, #0066ff);
  }
</style>
